<template>
  <div class="container">
    <!-- header -->
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="i el-icon-aim">&nbsp;&nbsp;设备管理</i>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="data">
      <div class="color-block">
        <!-- DN200大表数据 -->
        <el-button class="btn" type="primary" @click="DayAnalysis(DN200)">
          <i class="i el-icon-sunny"></i>
          <div class="data">{{dayWater}}</div>今日总用量
        </el-button>
        <el-button class="btn" type="success" @click="MonthAnalysis(DN200)">
          <i class="i el-icon-date"></i>
          <div class="data">{{monthWater}}</div>本月总用量
        </el-button>
        <!-- <el-button class="btn" type="info" disabled>
          <i class="i el-icon-s-order"></i>
          <div class="data">{{frequence}}</div>今日采集频次
        </el-button>-->
        <el-button class="btn" type="primary" style="background:#44b6ae" @click="getPressure()">
          <i class="i el-icon-odometer"></i>
          <div class="data">{{pressure}}</div>大表压力
        </el-button>
        <br />
        <el-button class="btn" type="warning" @click="toWaterQuality()">
          <i class="i el-icon-stopwatch"></i>
          <div class="data">{{waterQuality}}</div>水质(浊度)
        </el-button>
        <el-button class="btn" type="danger" @click="getFaultMeter()">
          <i class="i el-icon-warning"></i>
          <div class="data">{{faultCount}}</div>异常表数
        </el-button>
        <!-- 地图显示 -->
        <el-button
          class="btn"
          type="info"
          style="background: #8e7cc3"
          @click="getAllMeterPosition()"
        >
          <i class="i el-icon-place"></i>
          <div class="Data">地图显示</div>
        </el-button>
        <!-- <el-button class="btn" type="info" @click="getHistoryData(DN200)">
          <i class="i el-icon-s-order"></i>
          <div class="Data">历史数据</div>
        </el-button>-->
      </div>
      <el-table
        v-loading="meterLoading"
        :data="handleMeterList"
        header-cell-class-name="tableRow"
        cell-class-name="tableRow"
        highlight-current-row
      >
        <el-table-column align="center" type="index" label="序号"></el-table-column>
        <el-table-column align="center" label="表地址" min-width="90">
          <template slot-scope="scope">
            <el-button type="text" @click="getMeterMSg(scope.row)">{{scope.row.AddressCode}}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="PhoneNo" label="SIM卡号" min-width="95">
          <template slot-scope="scope">
            <el-button type="text" @click="getMeterMSg(scope.row)">{{scope.row.PhoneNo}}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="ForValue" label="表读数" min-width="70">
          <template slot-scope="scope">{{scope.row.ForValue}}</template>
        </el-table-column>
        <el-table-column align="center" prop="CreateTime" label="读数时间" min-width="135"></el-table-column>
        <el-table-column align="center" prop="CurStatus" label="表状态" min-width="70">
          <template slot-scope="scope">
            <el-tag
              type="success"
              effect="dark"
              v-if="scope.row.CurStatus === '在线' || scope.row.ForValue"
            >正常</el-tag>
            <el-tag type="warning" effect="dark" v-if="scope.row.CurStatus === '离线'">通讯异常</el-tag>
            <el-tag type="danger" effect="dark" v-if="scope.row.CurStatus === '告警'">数据异常</el-tag>
            <el-tag type="info" effect="dark" v-if="!scope.row.ForValue">异常</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" prop="PressValue" label="表压力" min-width="70">
          <template slot-scope="scope">
            <el-tag type="primary" effect="plain">{{scope.row.PressValue}}</el-tag>    
          </template>
        </el-table-column>-->
        <el-table-column align="center" prop="M_PipeDn" label="管径" min-width="80">
          <template slot-scope="scope">{{scope.row.M_PipeDn}}</template>
        </el-table-column>
        <el-table-column align="center" label="水表类型" min-width="80">
          <template slot-scope="scope">
            <el-tag type="info" effect="plain" v-if="scope.row.M_UserType">大表</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" prop="ValveType" label="阀门类型" min-width="80">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.ValveType === 0">手动阀</el-tag>
            <el-tag type="success" v-if="scope.row.ValveType === 1">自动阀</el-tag>
            <el-tag type="warning">无阀</el-tag>
          </template>
        </el-table-column>-->
        <!-- <el-table-column align="center" prop="ValveStatus" label="阀门状态" min-width="80">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.ValveStatus === 0">开阀</el-tag>
            <el-tag type="danger" v-if="scope.row.ValveStatus === 1">关阀</el-tag>
            <el-tag type="warning">/</el-tag>
          </template>
        </el-table-column>-->
        <el-table-column align="center" label="用量统计" min-width="110">
          <template slot-scope="scope">
            <el-button @click="DayAnalysis(scope.row)" type="text">日用量</el-button>
            <el-button @click="MonthAnalysis(scope.row)" type="text">月用量</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="历史数据" min-width="70">
          <template slot-scope="scope">
            <el-button @click="getHistoryData(scope.row)" type="text">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="通讯日志" min-width="70">
          <template slot-scope="scope">
            <el-button @click="getCommLog(scope.row)" type="text">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="M_InstallAddress"
          label="安装位置"
          min-width="70"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button @click="displayOnMap(scope.row)" type="text">
              <i class="el-icon-map-location" style="color: brown; font-size: 1.2em;"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 大表信息 -->
      <el-dialog
        title="大表信息"
        :visible.sync="meterMsgDialog"
        :close-on-click-modal="false"
        width="500px"
        center
      >
        <el-form ref="form" :model="meterMsg" label-position="right" label-width="6em">
          <el-form-item label="表地址">
            <el-input v-model="meterMsg.AddressCode" readonly></el-input>
          </el-form-item>
          <el-form-item label="SIM卡号">
            <el-input v-model="meterMsg.PhoneNo" readonly></el-input>
          </el-form-item>
          <el-form-item label="管径">
            <el-input v-model="meterMsg.M_PipeDn" readonly></el-input>
          </el-form-item>
          <el-form-item label="电池电压/V">
            <el-input v-model="meterMsg.CelVal" readonly></el-input>
          </el-form-item>
          <el-form-item label="材质">
            <el-input v-model="meterMsg.M_Material" readonly></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="meterMsg.M_Type" readonly></el-input>
          </el-form-item>
          <el-form-item label="单位">
            <el-input v-model="meterMsg.OrgName" readonly></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="meterMsg.MeterName" readonly></el-input>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 月用量统计弹窗 -->
      <el-dialog
        width="700px"
        :title="title"
        :visible.sync="monthAnalysisDialog"
        :close-on-click-modal="false"
        append-to-body
      >
        <el-table
          :data="handleMonthAnalysisList"
          header-cell-class-name="tableRow"
          v-loading="monthAnalysisLoading"
          cell-class-name="tableRow"
          :stripe="true"
          height="450"
        >
          <el-table-column align="center" type="index" label="序号"></el-table-column>
          <el-table-column align="center" prop="Average" label="月平均用量"></el-table-column>
          <el-table-column align="center" prop="Maximum" label="月最大用量"></el-table-column>
          <el-table-column align="center" prop="FlowMaxTime" label="月最大用量时间" min-width="140"></el-table-column>
          <el-table-column align="center" prop="Minimum" label="月最小用量"></el-table-column>
          <el-table-column align="center" prop="FlowMinTime" label="月最小用量时间" min-width="140"></el-table-column>
          <el-table-column align="center" prop="Sum" label="月总用量"></el-table-column>
        </el-table>
      </el-dialog>

      <!-- 日用量统计弹窗 -->
      <el-dialog
        width="700px"
        :title="title"
        :visible.sync="dayAnalysisDialog"
        :close-on-click-modal="false"
        append-to-body
      >
        <el-table
          :data="handleDayAnalysisList"
          header-cell-class-name="tableRow"
          v-loading="dayAnalysisLoading"
          cell-class-name="tableRow"
          :stripe="true"
        >
          <el-table-column align="center" type="index" label="序号"></el-table-column>
          <el-table-column align="center" prop="Average" label="日平均用量"></el-table-column>
          <el-table-column align="center" prop="Maximum" label="日最大用量"></el-table-column>
          <el-table-column align="center" prop="FlowMaxTime" label="日最大用量时间" min-width="140"></el-table-column>
          <el-table-column align="center" prop="Minimum" label="日最小用量"></el-table-column>
          <el-table-column align="center" prop="FlowMinTime" label="日最小用量时间" min-width="140"></el-table-column>
          <el-table-column align="center" prop="Sum" label="日总用量"></el-table-column>
        </el-table>
      </el-dialog>

      <!-- 查看历史数据弹窗 -->
      <el-dialog
        width="600px"
        :title="title"
        :visible.sync="historyDataDialog"
        :close-on-click-modal="false"
        append-to-body
      >
        <el-table
          :data="handleHistoryDataList"
          header-cell-class-name="tableRow"
          v-loading="historyDataLoading"
          cell-class-name="tableRow"
          :stripe="true"
          height="450"
        >
          <el-table-column align="center" type="index" label="序号" fixed></el-table-column>
          <el-table-column align="center" prop="ForValue" label="表读数"></el-table-column>
          <!-- <el-table-column align="center" prop="PressValue" label="表压力"></el-table-column> -->
          <el-table-column align="center" prop="CreateTime" label="读数时间" min-width="140" sortable></el-table-column>
        </el-table>
      </el-dialog>

      <!-- 查看通讯日志 -->
      <el-dialog
        width="80%"
        :title="title"
        v-loading="commLogLoading"
        :visible.sync="commLogListDialog"
        :close-on-click-modal="false"
        append-to-body
      >
        <el-table
          :data="handleCommLogList"
          header-cell-class-name="tableRow"
          v-loading="commLogLoading"
          cell-class-name="tableRow"
          :stripe="true"
        >
          <el-table-column align="center" type="index" label="序号"></el-table-column>
          <el-table-column align="center" label="日志类型" prop="LogType"></el-table-column>
          <el-table-column align="center" label="日志源" prop="LogSource"></el-table-column>
          <el-table-column align="center" label="日志内容" prop="LogText" min-width="200"></el-table-column>
          <el-table-column align="center" label="日志命令" prop="LogCommand"></el-table-column>
          <el-table-column align="center" label="日志时间" prop="LogTime" min-width="140" sortable></el-table-column>
        </el-table>
      </el-dialog>

      <!-- 在地图上查看表的位置 -->
      <el-dialog
        :visible.sync="mapDialog"
        title="当前表位置"
        center
        append-to-body
        width="90%"
        :close-on-click-modal="false"
      >
        <baidu-map
          class="map"
          :center="meterPositon"
          :scroll-wheel-zoom="true"
          :zoom="15"
          :enableMapClick="false"
        >
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
          <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
          <bm-marker :position="meterPositon" :dragging="true" @click="infoWindowOpen">
            <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">
              <div v-html="meterMarkerMsg"></div>
            </bm-info-window>
          </bm-marker>
        </baidu-map>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getMeterList,
  getMeterData,
  dayAnalysis,
  monthAnalysis,
  getHistoryDataList,
  getCommLogList,
  getWaterQualityData,
  getToken
} from "../../api/api";
import moment from "moment";
export default {
  data() {
    return {
      meterLoading: false,
      dayAnalysisLoading: false,
      monthAnalysisLoading: false,
      historyDataLoading: false,
      commLogLoading: false,
      meterList: [],
      dayAnalysisList: [],
      monthAnalysisList: [],
      historyDataList: [],
      commLogList: [],
      meterMsg: {},
      meterMsgDialog: false,
      dayAnalysisDialog: false,
      monthAnalysisDialog: false,
      historyDataDialog: false, // 控制查看历史数据的弹框
      commLogListDialog: false,
      title: null, // 查看历史数据标题
      token: null,
      // 色块数据
      DN200: {
        PhoneNo: "15608659111",
        AddressCode: "1908080001",
        CreateTime: new Date()
      },
      dayWater: "0.00",
      monthWater: "0.00",
      // frequence: 5,
      pressure: "0.00",
      faultCount: 0,
      mapDialog: false, //地图显示
      meterPositon: { lng: null, lat: null },
      allMeterPositon: [],
      meterMarkerMsg: {},
      show: false, // 标记显示与否
      lng: [
        108.704979,
        108.714767,
        108.713348,
        108.650993,
        108.710854,
        108.658333,
        108.677696,
        108.665642,
        108.663872,
        108.595833,
        108.631187
      ], //经度
      lat: [
        30.265829,
        30.287149,
        30.27355,
        30.247801,
        30.29561,
        30.260851,
        30.28574,
        30.25536,
        30.276449,
        30.198339,
        30.223709
      ], //纬度
      waterQuality: 0, //浊度
      cnt: 0,
      timer: null
    };
  },
  computed: {
    handleMeterList: function() {
      let that = this;
      if (that.meterList.length === 0) return;
      that.meterList.forEach(function(item) {
        /*switch (item.ValveType) {
          case 0:
            item.ValveType = "手动阀";
            break;
          case 1:
            item.ValveType = "自动阀";
            break;
          default:
            item.ValveType = "无阀";
            break;
        }
        switch (item.ValveStatus) {
          case 0:
            item.ValveStatus = "开";
            break;
          case 1:
            item.ValveStatus = "关";
            break;
           default:
            item.ValveStatus = "/";
            break;
        }*/
        item.CreateTime = moment(item.CreateTime).format("YYYY-MM-DD HH:mm:ss");
      });
      for (let i = 0; i < that.meterList.length; i++) {
        that.meterList[i].M_InstallAddress = [];
        that.meterList[i].M_InstallAddress.push(that.lng[i], that.lat[i]);
      }
      return that.meterList;
    },
    handleDayAnalysisList: function() {
      if (this.dayAnalysisList.length === 0) return;
      this.dayAnalysisList.forEach(function(item) {
        item.FlowMaxTime = moment(item.FlowMaxTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        item.FlowMinTime = moment(item.FlowMinTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      });
      return this.dayAnalysisList;
    },
    handleMonthAnalysisList: function() {
      if (this.monthAnalysisList.length === 0) return;
      this.monthAnalysisList.forEach(function(item) {
        item.FlowMaxTime = moment(item.FlowMaxTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        item.FlowMinTime = moment(item.FlowMinTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      });
      return this.monthAnalysisList;
    },
    handleHistoryDataList: function() {
      if (this.historyDataList.length === 0) return;
      this.historyDataList.forEach(function(item) {
        item.CreateTime = moment(item.CreateTime).format("YYYY-MM-DD HH:mm:ss");
      });
      return this.historyDataList;
    },
    handleCommLogList: function() {
      if (this.commLogList.length === 0) return;
      this.commLogList.forEach(function(item) {
        item.LogTime = moment(item.LogTime).format("YYYY-MM-DD HH:mm:ss");
      });
      return this.commLogList;
    }
  },
  methods: {
    // 获取大表列表
    GetMeterList() {
      let that = this;
      that.meterLoading = true;
      let msg = {
        token: sessionStorage.getItem("token"),
        page: 1
      };
      getMeterList(msg)
        .then(function(res) {
          if (res.data.Msg === "Success") {
            that.meterList = res.data.List;
            that.meterList.splice(0, 1);
            that.meterLoading = false;
            that.cnt = 0;
          } else {
            that.cnt++;
            if (that.cnt < 5) {
              that.GetMeterList();
            }
            // that.Error("获取数据失败！");
            // that.cGetMeterList();
            that.meterLoading = false;
          }
        })
        .catch(function(err) {
          that.meterLoading = false;
          // that.Error(err);
        });
    },

    //获取DN200大表数据
    getDN200Data() {
      let that = this;
      let msg = {
        token: sessionStorage.getItem("token"),
        phoneNumber: that.DN200.PhoneNo,
        addressCode: that.DN200.AddressCode,
        day: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
        month: moment(new Date()).format("YYYY-MM")
      };
      dayAnalysis(msg)
        .then(res => {
          if (msg.token === null) {
            that.getToken();
          } else if (res.data.code === "200") {
            that.dayWater =
              res.data.Data && res.data.Data.Sum ? res.data.Data.Sum : "0.00";
          } else {
            that.Error("获取今日用量数据失败！");
          }
        })
        .catch(function(err) {
          // that.Error(err);
        });
      monthAnalysis(msg)
        .then(function(res) {
          if (msg.token === null) {
            that.getToken();
          } else if (res.data.code === "200") {
            that.monthWater =
              res.data.Data && res.data.Data.Sum ? res.data.Data.Sum : "0.00";
          } else {
            that.Error("获取本月总用量数据失败！");
          }
        })
        .catch(function(err) {
          // that.Error(err);
        });
    },

    // 获取压力值
    getPressure() {
      let that = this;
      let msg = {
        token: sessionStorage.getItem("token"),
        phoneNumber: "15608656111",
        addressCode: "1908080013"
      };
      getMeterData(msg)
        .then(res => {
          if (msg.token === null) {
            that.getToken();
          } else if (res.data.code === "200") {
            that.pressure =
              res.data.Data && res.data.Data.PressValue
                ? res.data.Data.PressValue
                : "0.00";
          } else {
            that.Error("获取压力失败！");
          }
        })
        .catch(function(err) {
          // that.Error(err);
        });
    },

    // 获取水质数据
    getWaterQuality() {
      let that = this;
      let msg = {
        enprNo: 'esss',
        page: 1,
        rows: 1
      };
      getWaterQualityData(msg)
        .then(res => {
          if (res.data.code === "200") {
            that.waterQuality =
              res.data.data.content && res.data.data.content[0]
                ? res.data.data.content[0].turbidity
                : 0;
          } else {
            that.Error("获取数据失败！");
          }
        })
        .catch(error => {
          // that.Error(error);
        });
    },
    // 跳转到水质数据界面
    toWaterQuality() {
      this.$router.push({ path: "/NB/waterMonitoring" });
    },

    //  获取大表信息
    getMeterMSg(row) {
      let that = this;
      that.meterMsgDialog = true;
      that.meterMsg.AddressCode = row.AddressCode;
      that.meterMsg.PhoneNo = row.PhoneNo;
      that.meterMsg.M_PipeDn = row.M_PipeDn;
      that.meterMsg.CelVal = row.CelVal;
      that.meterMsg.M_Material = row.M_Material;
      that.meterMsg.M_Type = row.M_Type;
      that.meterMsg.OrgName = row.OrgName;
      that.meterMsg.MeterName = row.MeterName;
    },

    // 地图显示
    getAllMeterPosition() {
      // window.location.href="../../../../../static/displayOnMap.html"; //当前页面打开
      window.open("static/displayOnMap.html"); //新页面打开
    },

    // 日用量统计
    DayAnalysis(row) {
      let that = this;
      that.dayAnalysisDialog = true;
      that.dayAnalysisLoading = true;
      let msg = {
        token: sessionStorage.getItem("token"),
        phoneNumber: row.PhoneNo,
        addressCode: row.AddressCode,
        // day: moment(row.CreateTime).format("YYYY-MM-DD HH:mm:ss")
        day: moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
      };
      that.title = moment(msg.day).format("YYYY年MM月DD日") + "用量统计";
      that.dayAnalysisList = [];
      dayAnalysis(msg)
        .then(res => {
          // console.log(res);
          if (res.data.code === "200") {
            that.dayAnalysisList.push(res.data.Data);
            that.dayAnalysisLoading = false;
          } else {
            that.dayAnalysisLoading = false;
            // that.Error("获取日用量数据失败！");
          }
        })
        .catch(function(err) {
          // that.Error(err);
        });
    },
    // 月用量统计
    MonthAnalysis(row) {
      let that = this;
      that.monthAnalysisDialog = true;
      that.monthAnalysisLoading = true;
      let msg = {
        token: sessionStorage.getItem("token"),
        phoneNumber: row.PhoneNo,
        addressCode: row.AddressCode,
        // month: moment(row.CreateTime).format("YYYY-MM")
        month: moment(new Date()).format("YYYY-MM")
      };
      that.title = msg.month.replace("-", "年") + "月用量统计";
      that.monthAnalysisList = [];
      monthAnalysis(msg)
        .then(function(res) {
          if (res.data.code === "200") {
            // console.log(res.data);
            that.monthAnalysisList.push(res.data.Data);
            that.monthAnalysisLoading = false;
          } else {
            that.monthAnalysisLoading = false;
            // that.Error("获取月用量数据失败！");
          }
        })
        .catch(function(err) {
          // that.Error(err);
        });
    },
    // 获取历史数据
    getHistoryData(row) {
      let that = this;
      that.title = "历史数据";
      that.historyDataDialog = true;
      that.historyDataLoading = true;
      let msg = {
        token: sessionStorage.getItem("token"),
        addressCode: row.AddressCode,
        startTime: "2010-10-10 00:00:00",
        endTime: "3019-10-10 00:00:00",
        page: 1
      };
      getHistoryDataList(msg)
        .then(function(res) {
          if (res.data.code === "200") {
            that.historyDataList = res.data.List;
            that.historyDataLoading = false;
          } else {
            that.historyDataLoading = false;
            // that.Error("获取历史数据失败！");
          }
        })
        .catch(function(err) {
          // that.Error(err);
        });
    },
    // 获取通信日志
    getCommLog(row) {
      let that = this;
      that.title = "通讯日志";
      that.commLogListDialog = true;
      let msg = {
        token: sessionStorage.getItem("token"),
        addressCode: row.AddressCode,
        startTime: "2010-10-10 00:00:00",
        endTime: "3019-10-10 00:00:00",
        page: 1
      };
      getCommLogList(msg)
        .then(function(res) {
          if (res.data.code === "200") {
            that.commLogList = res.data.List;
            that.commLogLoading = false;
          } else {
            that.Error("获取通讯日志失败！");
          }
        })
        .catch(function(err) {
          // that.Error(err);
        });
    },
    // 在地图上显示
    displayOnMap(row) {
      let that = this;
      let position = row.M_InstallAddress;
      that.meterMarkerMsg =
        '<div style="width:300px;margin:0;line-height:20px;padding:2px;">' +
        '<img src="../../../../../static/img/meter.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
        "表地址：" +
        row.AddressCode +
        "<br/>SIM卡号：" +
        row.PhoneNo +
        "<br/>表型号：" +
        row.M_Type +
        "<br/>材质：" +
        row.M_Material +
        "<br/>管径：" +
        row.M_PipeDn +
        "</div>";
      that.mapDialog = true;
      if (position) {
        that.meterPositon.lng = position[0];
        that.meterPositon.lat = position[1];
      } else {
        that.marker = false;
        that.Error("无法获取该表位置！");
      }
    },

    // Marker 打开与关闭
    infoWindowClose() {
      this.show = false;
    },
    infoWindowOpen() {
      this.show = true;
    },

    Error(str) {
      this.$alert(String(str), "提示", {
        confirmButtonText: "确定",
        type: "error"
      });
    },

    // 获取token
    getToken() {
      let that = this;
      getToken()
        .then(function(res) {
          if (res.data.code === "200") {
            sessionStorage.setItem("token", res.data.info);
          } else {
            // that.Error("获取token失败！");
          }
        })
        .catch(function(err) {
          that.Error(err);
        });
    }
  },

  created() {
    this.getToken();
  },

  mounted() {
    this.getToken();
    this.GetMeterList();
    this.getDN200Data();
    this.getPressure();
    this.getWaterQuality();
  }
};
</script>

<style scoped>
/* color-block 色块样式 */
.data {
  font-size: 2em;
  padding-bottom: 0.6em;
}
.Data {
  padding-top: 0.7em;
  padding-bottom: 0.6em;
  font-size: 1.8em;
}
.i {
  padding-top: 0.4em;
  float: left;
  font-size: 2em;
}
.btn {
  width: calc(33% - 10px);
  margin-bottom: 0.8em;
}
/* .tableRow {
  text-align: center !important;
} */
.el-tabs__content {
  overflow: auto;
  position: relative;
}
.map {
  width: 100%;
  height: 500px;
}
</style>